/*
  学习目标：使用useState的三个注意事项
  */
import React, { useState } from 'react';

export default function App() {
  // 1. 声明多个状态：调用useState多次，得到多个状态
  const [count, setCount] = useState(1000);
  const [msg, setMsg] = useState('');

  // 2. useState可以创建任意类型的状态
  // 2.1 声明数组
  const [list, setList] = useState([1, , 2, 3]);
  // 2.2 声明对象
  const [obj, setObj] = useState({ name: 'zs', age: 18 });
  // 2.3 👎声明JSX，一般不会这么写
  const [jsx, setJsx] = useState(<h1>我是JSX</h1>);

  // 3. 👍规范问题
  // const [声明的状态， set大写驼峰式命名] = useState(初始值)
  // 使用快捷键useState去声明状态
  const [arr, setArr] = useState();

  return (
    <div>
      {list.map((item) => {
        return <h1>{item}</h1>;
      })}
      conut -- {count}
      msg -- {msg}
      <h2>
        {obj.name} -- {obj.age}
      </h2>
      <h3>{jsx}</h3>
      <button onClick={() => setMsg(msg + '~')}>点击改变msg</button>
      <button onClick={() => setCount(count + 1)}>点击改变count</button>
    </div>
  );
}
